<template>
  <el-dialog width="70%" :visible.sync="visible" title="查看监测地址" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm"  :inline="false" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
         

      <el-input
          type="textarea"
          :rows="10"
          v-model="dataForm.clickOcpxAddress">
        </el-input>


     
      </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import { getDictDataList } from '@/utils'

export default {
  data () {
    return {
      visible: false,
      dataForm: {
        id: '',
        name: '',
        apiId: '',
        type: 1,
        business: '',
        productChannel: 'dahanghai',
        mediaChannel: '',
        dayLimitNumber: '',
        totalLimitNumber: '',
        mediaKey: '',
        channelId: '',
        taskId: '',
        tagId: '',
        planId: '',
        callTypeRelat: '',
        productPer: '',
        status: 1,
        callType: 2,
        updateTime: '',
        createTime: '',
        depthCallType:'',
        per:100,
        productDetailPer:100,
        payPer:100,
        nextPer:100,
        orderPer:100,
        redPagPer:100,
        clickOcpxAddress:''

      },
      callTypeList:[],
      configApis:[],
      businessList:[],
      mediaList:[],
      productList:[],
      productCallTypeList:[],
    }
  },
  computed: {
    dataRule () {
      return {
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        apiId: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        type: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        business: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        productChannel: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        mediaChannel: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
       
      }
    }
  },
  mounted() {
    this.listAllConifg();
    this.getBusinessDict();
    this.getProductList();
    this.getMediaList();
    this.getCallTypeList();
    this.handerProductChannelChange();
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
    },

    // 获取信息
    getInfo () {
      this.$http.get(`/adx/ocpxaccount/urlInfo`,{params:this.dataForm}).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm.clickOcpxAddress=res.data;
      }).catch(() => {})
    },
    handerProductChannelChange(){
    
      //当选中产品发生改变的时候，内容会发生变化
      this.productCallTypeList = getDictDataList("callType_"+this.dataForm.productChannel)

    },
    listAllConifg(){
      return this.$http.get('/adx/ocpxconfig/listAll',{params:this.dataForm}).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }else{
          this.configApis=res.data;
        }
      }).catch(() => { })
  },
  getBusinessDict() {
      this.businessList = getDictDataList("businessList")
    },
    getCallTypeList(){
      this.callTypeList = getDictDataList("callTypeList")
    },
    getMediaList() {
      this.mediaList = getDictDataList("mediaList")
    },
       getProductList() {
      this.productList = getDictDataList("productList")
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
<style lang="css" scoped>
.el-form--inline .el-form-item {
    display: inline-block;
    margin-right: 100px;
    vertical-align: top;
}
.el-select{
  width: 190px;
}

</style>